<template>
  <div class="container">
    <header class="header">
			<input type="text" placeholder="搜索"/>
		</header>
		
    <div class="content" id="content">
			<div class="banner">
				<van-swipe :autoplay="1000">
					<van-swipe-item><img src="../../../public/img/01.jpg" ></van-swipe-item>
					<van-swipe-item><img src="../../../public/img/02.jpg"></van-swipe-item>
					<van-swipe-item><img src="../../../public/img/03.jpg"></van-swipe-item>
					<van-swipe-item><img src="../../../public/img/05.jpg"></van-swipe-item>
					<van-swipe-item><img src="../../../public/img/06.jpg"></van-swipe-item>
					<van-swipe-item><img src="../../../public/img/07.jpg"></van-swipe-item>
				</van-swipe>
			</div>

			<mynav />

			<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
				<div class="main">
					<van-list
						v-model="loading"
						:finished="finished"
						finished-text="没有更多了"
						@load="onLoad"
					>
					<h4>精彩小电影</h4>
					<ul>
						<li>
							<div class="main-left">
								<iframe frameborder="0" style="width:1.5rem;height:100%" src="https://v.qq.com/txp/iframe/player.html?vid=p0852o5h49p" allowFullScreen="true"></iframe>
							</div>
							<div class="main-right">
								<iframe frameborder="0" style="width:1.5rem;height:100%" src="https://v.qq.com/txp/iframe/player.html?vid=p0852o5h49p" allowFullScreen="true"></iframe>
								<iframe frameborder="0" style="width:1.5rem;height:100%" src="https://v.qq.com/txp/iframe/player.html?vid=p0852o5h49p" allowFullScreen="true"></iframe>
							</div>
						</li>
						<li>
							<div class="main-left">
								<iframe frameborder="0" style="width:1.5rem;height:100%" src="https://v.qq.com/txp/iframe/player.html?vid=p0852o5h49p" allowFullScreen="true"></iframe>
							</div>
							<div class="main-right">
								<iframe frameborder="0" style="width:1.5rem;height:100%" src="https://v.qq.com/txp/iframe/player.html?vid=p0852o5h49p" allowFullScreen="true"></iframe>
								<iframe frameborder="0" style="width:1.5rem;height:100%" src="https://v.qq.com/txp/iframe/player.html?vid=p0852o5h49p" allowFullScreen="true"></iframe>
							</div>
						</li>
						<li>
							<div class="main-left">
								<iframe frameborder="0" style="width:1.5rem;height:100%" src="https://v.qq.com/txp/iframe/player.html?vid=p0852o5h49p" allowFullScreen="true"></iframe>
							</div>
							<div class="main-right">
								<iframe frameborder="0" style="width:1.5rem;height:100%" src="https://v.qq.com/txp/iframe/player.html?vid=p0852o5h49p" allowFullScreen="true"></iframe>
								<iframe frameborder="0" style="width:1.5rem;height:100%" src="https://v.qq.com/txp/iframe/player.html?vid=p0852o5h49p" allowFullScreen="true"></iframe>
							</div>
						</li>
					</ul>
				</van-list>
				</div>
			</van-pull-refresh>
			<div class="backtop" @click="backtop" v-show="flag">
        <van-icon name="upgrade" size="30px"/>
      </div>
		</div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, PullRefresh, Toast, List, Icon } from 'vant'
Vue.use(Swipe).use(SwipeItem)
Vue.use(PullRefresh)
Vue.use(Toast)
Vue.use(List)
Vue.use(Icon)

import Nav from '@/components/Nav'
export default {
	components: {
		mynav: Nav
	},

	data() {
    return {
			isLoading: false,
			list: [],
      loading: false,
			finished: false,
			flag: false
    }
  },

  methods: {
    onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
      }, 500);
		},
		onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 500);
		},
		scrollevent() {
      let scrolltop = document.getElementById('content').scrollTop
      if (scrolltop > 180) {
        this.flag = true
      }else{
        this.flag = false
      }
    },
    backtop () {
      document.getElementById('content').scrollTop = 0
    }
	},
	mounted () {
    let scrolltoTop = document.getElementById('content')
		scrolltoTop.addEventListener('scroll',this.scrollevent)
	}	
}
</script>
	
<style lang="scss" scoped>
@import "@/lib/reset.scss";

.container {
	@include rect(100%,100%);
	@include overflow(auto);
	.header {
		@include flexbox();
		@include justify-content();
		@include align-items();
		input {
			border-radius: .5rem;
			@include rect(80%,80%);
			text-indent: .05rem;
			border: .01rem solid #ccc;
		}
	}	
	.content {
		@include overflow(auto);
		.backtop {
			position: fixed;
			bottom: 0.6rem;
			right: 0.15rem;
			background-color: #fff;
		}

		.banner {
			width: 100%;
			height: 1.8rem;
			overflow: hidden;
			.van-swipe {
				width: 100%;
				height: 1.8rem;
				img {
					width: 100%;
					height: 1.8rem;
					border: 1px solid #ccc;
				}
			}
		}
		.nav {
			@include flexbox();
			@include flex-direction(column);
			ul {
				@include flexbox();
				@include justify-content(space-around)
			}
		}
		.main {
			h4 { 
				@include font-size(.24rem);
				@include text-align();
			}
			li {
				@include flexbox();
				margin-bottom: .2rem;
				.main-left {
					@include rect(100%,2rem);	
				}
				.main-right {
					@include rect(100%,.96rem);	
				}
			}
		}
	}	
}	
</style>
